<template>
	<view class="content">
		<view class="title">
			{{status}}
		</view>
		<view class="box">
			<view class="box_title">
			{{ detaile.serviceName+ '/' + detaile.userName}}
			</view>
			<view class="conter">
				<view class="conter_title"> 服务时间</view>	<view class="conter_msg">{{detaile.scheduleTime+' '+detaile.workTime}}</view>
			</view>
			<view class="conter">
				<view class="conter_title"> 服务地址</view>	<view class="conter_msg" >{{detaile.address}}</view>
			</view>
			<view class="conter">
				<view class="conter_title"> 订单编号</view>	<view class="conter_msg">{{detaile.number}}</view>
			</view>
			<view class="conter">
				<view class="conter_title"> 创建时间</view>	<view class="conter_msg">{{detaile.createdAt}}</view>
			</view>
		</view>
		<view class="box" v-if="detaile.otherInfo">
			<view class="conter" style="margin-top: 0;">
				<view class="conter_title"> 备注原因</view>	<view class="conter_msg" style="font-weight: 400;">{{detaile.otherInfo ? detaile.otherInfo : '' }}</view>
			</view>
		</view>
		<view class="box">
			<view class="conter" style="margin-top: 0;">
				<view class="conter_title"> 收益金额</view>	<view class="conter_msg" style="font-weight: 500;">￥{{detaile.realPrice ? detaile.realPrice : detaile.price}}</view>
			</view>
		</view>
		<view class="title" style="color: #333333; font-size: 28rpx; margin: 0 0 10rpx 40rpx;">
			核对说明
		</view>
		<view class="tips" v-if="tipes.length>0">
			<view class="tip" v-for="(item,index) in tipes" :key="index">{{item}}</view>
		</view>
		<view class="end"  v-show="btnText">
			<view class="list_detaile one" v-show="detaile.status==4" @click.stop="feedback()">反馈</view>
			<view class="list_detaile" :style="signStyle"  @click.stop="check()">{{btnText}}</view>	
		</view>
		
		<!-- 反馈弹窗 -->
		<view class="feedback"  @touchmove.prevent.stop=""  v-show="feedbackShow"> 
			<view class="dialog">
				<view class="dialog_title">
					反馈原因
				</view>
				<view class="dialog_content">
					<view class="dialog_content_title">
						备注原因：
					</view>
					<view class="">
						<textarea name="dialog_content" class="dialog_content_msg" placeholder="请填写备注" auto-height="true" placeholder-class="placeholder" id="" maxlength="100" v-model="feedbackVal"></textarea>
						<view class="dialog_content_tip">
							提交成功后，平台会在3个工作日内与您联系核对！
						</view>
					</view>
				</view>
				<view class="dialog_footer">
					<view class="dialog_footer_left" style="border-right: 1rpx solid #E5E5E5;" @click="feedbackCancel()">取消</view>
					<view class="dialog_footer_right" style="color: #3c8eff;" @click="feedbackConfirm()">提交</view>
				</view>
			</view>
		</view>
		<uni-confirm :show="confirmShow"
			:title="confirmTitle" 
			:content="confirmContent"
			@cancel="bindBtn('cancel')" 
			@confirm="bindBtn('confirm')">
		</uni-confirm>
	</view>
</template>

<script>
	import { selectOrderDetaile ,urgeCloseAnAccount,nurseUpdateOffOrder,selectOrderNum} from '@/apis/line-order/index.js'
	import { requestAndroid } from  '@/common/js/location.js';
	import uniConfirm from '@/components/uni-ui/uni-confirm/uni-confirm.vue';
	export default {
		data() {
			return {
				tipes:['1、若7日内无法完成核对，系统将自动核对成功','2、核对异常时,平台将在3个工作日内完成审核。','3、核对成功后,平台将在7个工作日内结算佣金。','4、如有核对问题可拨打电话：400-880-9120'],
				offOrderId:'',
				detaile:{},
				feedbackShow:false,//反馈
				feedbackVal:'',//反馈内容
				confirmShow:false,
				confirmTitle:'订单核对',
				confirmContent:'请确保收益金额与实际收益保持一致，如金额有误，请联系平台！核对成功即表示金额无误，将无法进行修改，请仔细核对！',
				index:'',
				sign:'',
			}
		},
		onLoad(option) {console.log(option,'详情页接受值')
			if(option.index){
				this.index = option.index
			}
			if(option.offOrderId){
				this.offOrderId=option.offOrderId
				this.getDetaile()
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			if(this.feedbackShow){
				uni.stopPullDownRefresh(); return
			}
			this.getDetaile()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onBackPress() {
			let state={}
			state.index = this.index,
			state.status = this.detaile.status
			if(this.detaile.sign){
				state.sign=this.detaile.sign
			}
			uni.$emit('state',state)
			return 
		},
		computed:{
			status(){
				let status = this.detaile.status
				if(status==4){
					return '待核对'
				}else if(status==5){
					return '已结算'
				}else if(status==6){
					return '已核对'
				}else if(status==7){
					return '核对异常'
				}
			},
			btnText(){
				if(this.detaile.status==4){
					return '确认'
				}else if(this.detaile.status==5){
					return ''
				}else if(this.detaile.status==6){
					if(this.detaile.sign){
						return '已催促'
					}else{
						return '催结算'
					}
				}else if(this.detaile.status==7){
					return '联系平台'
				}
			},
			signStyle(){
				if(this.detaile.sign && this.detaile.status==6){
					return 'background:#D8D8D8 ;'
				}
			},
		},
		components:{
			uniConfirm,
		},
		methods: {
			async getDetaile(){
				let res =await selectOrderDetaile({offOrderId:this.offOrderId})
				if(res.success){
					this.detaile=res.object
				}
			},
			//反馈
			feedback(){
				this.refash(false)
				this.feedbackShow=true
			},
			//反馈取消
			feedbackCancel(){
				this.refash(true)
				this.feedbackShow=false
			},
			//反馈确认
			async feedbackConfirm(){
				if(this.feedbackVal.length<5 || this.feedbackVal.length>99){
					uni.showToast({
						icon:'none',
						title:'请输入5-100个文字',
					})
					return
				}
				let res=await nurseUpdateOffOrder({number:this.detaile.number,status:7,otherInfo:this.feedbackVal,id:this.detaile.id})
				if(res.success){
					this.detaile.status=7
					this.detaile.otherInfo = this.feedbackVal
					uni.showToast({
						icon:'none',
						title:'提交成功！',
					})
					this.feedbackVal = ''
					this.getDetaile()
				}else{
					uni.showToast({
						icon:'none',
						title:'提交失败，请稍后重试',
					})
				}
				this.refash(true)
				this.feedbackShow=false
			},
			
			//订单操作
			check(){
				if(this.detaile.status == 4){
					this.refash(false)
					this.confirmShow = true
				}else if(this.detaile.status == 6){
					if(this.detaile.sign){
						return
					}
					this.urge()
				}else if(this.detaile.status == 7){
					this.callLoto()
				}
			},
			//订单核对确认弹框
			bindBtn(type){
				if(type=='confirm'){
					this.confirm()
				}
				this.refash(true)
				this.confirmShow=false
			},
			//核对确认
			async confirm(){
				let res=await nurseUpdateOffOrder({number:this.detaile.number,status:6,id:this.detaile.id}) //核对确认
				console.log('核对确认',res)
				if(res.success){
					this.detaile.status =6
					uni.showToast({
						icon:'none',
						title:'核对成功！',
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'核对失败，请稍后重试',
					})
				}
			},
			//催结算
			async urge(){
				let res =await urgeCloseAnAccount({number:this.detaile.number,id:this.detaile.id})
				if(res.success){
					uni.showToast({
						icon:'none',
						title:res.codeMsg.msg,
					})
					this.detaile.sign = 1
					
				}else{
					uni.showToast({
						icon:'none',
						title:'催促失败，请稍后重试',
					})
				}
				console.log('催结算',res)
			},
			
			//联系机构
			callLoto(){
				requestAndroid('android.permission.CALL_PHONE','通话权限')
				 this.$store.dispatch('call')
			},
			refash(change){
				getCurrentPages()[getCurrentPages().length - 1].$getAppWebview().setStyle({  
				  pullToRefresh: {  
				    support: change,  
				    style: plus.os.name === 'Android' ? 'circle' : 'default'  
				  }  
				});  
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100%;
		background:linear-gradient(180deg, #60A3FE 0%, #60A3FE 222rpx, #F3F6F6 222rpx, #F3F6F6 100%);
	}
	.title{
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 50rpx;
		margin-left: 50rpx;
		padding-top: 16rpx;
		margin-bottom: 32rpx;
	}
	.box{
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto 16rpx;
		padding: 28rpx 20rpx;
		box-sizing: border-box;
		.box_title{
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
		}
		.conter{
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			.conter_title{
				color: #666666;
			}
			.conter_msg{
				color: #333333;
				width: 354rpx;
				text-align: right;
				overflow:hidden; //超出的文本隐藏
				text-overflow:ellipsis; //用省略号显示
				white-space:nowrap; //不换行
			}
		}
	}
	.tips{
		width: 670rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 36rpx;
		margin: 0 auto;
	}
	.feedback{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 100;
		transition:visibility 200ms ease-in;
		background-color: rgba(0, 0, 0, 0.38);
		.dialog{
			position: absolute;
			z-index: 99;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) ;
			transition: transform 0.3s;
			width: 540rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;
			overflow: hidden;
			transition: opacity 200ms ease-in;
			padding-top: 30rpx;
			.dialog_title{
				text-align: center;
				line-height: 48rpx;
				font-size: 32rpx;
				margin-bottom: 28rpx;
			}
			.dialog_content{
				display: flex;
				justify-content: space-around;
				padding: 0 30rpx;
				.dialog_content_title{
					width: 140rpx;
					font-weight: 400;
					font-size: 24rpx
				}
				.dialog_content_tip{
					font-size: 24rpx;
					line-height: 36rpx;
				}
				textarea{
					max-width: 338rpx;
					font-size: 24rpx;
					min-height: 98rpx;
					background: rgba(0, 0, 0, 0.03);
					border-radius: 4rpx;
					padding: 4rpx;
					margin-bottom: 16rpx;
				}
				.placeholder{
					padding-left: 20rpx;
					font-size: 20rpx;
					color: #999999;
					line-height: 28rpx;
				}
				.dialog_content_tip{
					width: 338rpx;
					height: 60rpx;
					font-size: 20rpx;
					color: #FF6A00;
					line-height: 30rpx;
				}
			}
			.dialog_footer{
				margin-top: 32rpx;
				position: relative;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #333;
				font-size: 32rpx;
				display: flex;
				flex-direction: row;
				border-top: 1rpx solid #E5E5E5;
				.dialog_footer_left,
				.dialog_footer_right{
					position: relative;
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					height: 88rpx;
					font-size: 32rpx; //确认取消大小
					line-height: 88rpx;
					text-align: center;
					background-color: #fff;
					color: #333;
				}
			}
		}
	}
	.end{
		width: 100%;
		box-sizing: border-box;
		height: 190rpx;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 42rpx;
		.list_detaile{
			width: 160rpx;
			height: 72rpx;
			background: #3C8EFF;
			border-radius: 20rpx;
			line-height: 72rpx;
			text-align:center;
			color: #FFFFFF;
			font-size: 28rpx;
			margin-left: 24rpx;
		}
		.one{
			background: #FFFFFF;
			border: 2rpx solid #999999;
			color: #999999;
		}
	}
</style>
